<template>
    <div class="grid-view" ref="gridView">
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'GridView', // 显示数据列表组件
    props: {
        // 报表列数
        cols: {     
          type: Number,
          default: 2
        },
        // 左右边框值
        hMargin: {
          type: Number,
          default: 8
        },
        // 上下边框值
        vMargin: {
          type: Number,
          default: 8
        },
        // 内容大小
        itemSpace: {
          type: Number,
          default: 8
        },
        // 排列大小
        lineSpace:{
          type: Number,
          default: 8
        },
    },
     mounted() {
       setTimeout(this._autoLayout, 20)
     },
      updated() {
      this._autoLayout()
     },
       methods: {
        // 一. 获取网格内容和子集内容
        //  autoLayout 自动排版
          _autoLayout() {
        /*   注意: 1. 使用 $refs 更加准确找到 GridView 组件
                   2. 不建议使用document.querySelector, 不方便准确查找
        */  
        //  1. 获取网格内容
            let gridEL = this.$refs.gridView
        //  2. 获取子集内容
            let children = gridEL.children 

        // 二. 设置 gridEL 的内边距
          gridEL.style.padding = `${this.vMargin}px ${this.hMargin}px`
        
        // 三. 计算item的宽度
          let itemWidth = (gridEL.clientWidth - 2 * this. hMargin - (this.cols - 1) * this.itemSpace) / this.cols
          let chidlength = children.length 
           for(let i= 0; i < chidlength; i++) {
               let item = children[i]
               item.style.width = itemWidth + 'px'
               if((i + 1) % this.cols !== 0) {
                   item.style.marginRight = this.itemSpace + 'px'
               }
               if(i >= this.cols){
                   item.style.marginTop = this.lineSpace + 'px'
               }
           }
        }   
    }
}
</script>

<style scoped>
.grid-view {
    display: flex;
    flex-wrap: wrap;
}
</style>